<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'JSTest.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
		<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="js/myplugin/hilight.js"></script>
		<script type="text/javascript" src="js/myplugin/fadeout.js"></script>
		<SCRIPT src="http://pstatic.xunlei.com/js/webThunderDetect.js"></SCRIPT>
	<style type="text/css">
		#menu{width: 300px;}	
		.has_children{background: #555;color: #fff;cursor:pointer; }
		.highlight{color: #fff;background: green;}
		div{padding: 0;margin: 10px 0}
		div a{background: #888;display: none;float: left;width: 300px;}
		
		.show{background: gray;width: 500px;height: 300px;}
		
		#panel{
			position: relative;
			width: 100px;
			height: 100px;
			background: gray;
			cursor: pointer;
			border: 1px solid #0050D0;
		}
	</style>
	
	<script type="text/javascript">
		function regexp(){
			var reg = /b[ae]?d/;
			var str = "aggd,bed,baed,bacd,baad,baeed";
			alert(reg.test(str));
		}
		$(function(){
			//alert($('input:radio[name="sex"]').get(0).checked);
			//点击当前div显示当前div中的a内容并且div高亮，而其他div取消高亮，其a内容隐藏,再点击a内容显示
			$(".has_children").click(function(){
				$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();
			});
			//id为ttable的表格中的tr，最后一个td包含有checkbox的背景色编成红色
			$("#ttable>tbody>tr:has(td:has(:checkbox))").css("background","red");
			//复制ul中的li到ul中(如果clone中加入true参数，则新复制的节点也具备有复制功能)
			$("ul li").click(function(){
				$(this).clone().appendTo("ul");
			});
			//用div包裹ul
			$("ul").wrap("<div  style='background:gray;' align='center'></div>");
			//按钮却换输入框的内容
			$("#b1").toggle(function(){
				$("#test").val("");
				//如果div中含有qiehuan类，则删除，如果没有则增加
				$("#qiehuan").toggleClass("show");
				$("#test").attr("disabled",false);
			},function(){
				$("#qiehuan").toggleClass("show");
				$("#test").val($("#test").val());
				$("#test").attr("disabled",true);
			});
			//设置p元素的透明度
			$("#ppp").css("opacity",0.5);
			//获取事件触发的元素
			$("a[href='http://www.baidu.com']").click(function(e){
				//获取触发点击事件的a元素的href属性值
				alert(e.target.href);
				//return false;
			});
			//获取鼠标点击键
			$("body").mousedown(function(e){
				//alert(e.which);
			});
			//获取键盘点击键
			$("body").keydown(function(e){
				//alert(e.which);
			});
			//slideUp and slideDown
			$("#uod").toggle(function(){
				$('#menu').slideUp();
			},function(){
				$('#menu').slideDown();
			});
			//插件测试
			$('.hilight').hilight({ background: 'green', foreground: 'white' });  
			$('#menu').showstyle();
			//动画效果
			$("#panel").css("opacity","0.5");
			$("#donghua").toggle(function(){
				$("#panel").animate({left:"1000px",height:"200px",opacity:"1"},5000).animate({top:"200px",width:"200px"},3000).fadeOut();
			},function(){
				$("#panel").animate({top:"100px",width:"100px"},3000).animate({left:"0px",height:"100px",opacity:"0.5"},5000);
			});
			
			//表格过滤
			 $("#tablefilter").keyup(function(){
			      $("#ttable tbody tr")
							.hide()
							.filter(":contains('"+( $(this).val() )+"')")
							.show();
			  		}).keyup();
				})
		//点击事件最近一个a变色
		$(document).bind("click",function(e){
			$(e.target).closest("div a").css("color","red");
		})
		function stopAnimation(){
			$("#panel").stop(true,true);
		}
	</script>
  </head>
  
  <body>
  <input type="radio" name="sex" />男<input type="radio" name="sex" checked="checked"/>女
	  <div class="hilight { background: 'red', foreground: 'white' }">     
	  Have a nice day!     
	</div>     
	<div class="hilight { foreground: 'orange' }">     
	  Have a nice day!     
	</div>     
	<div class="hilight { background: 'green' }">     
	  Have a nice day!     
	</div>   
  <p id="ppp" class="hilight">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p><a href="http://www.baidu.com" target="bank" style="float: left;">百度搜索</a>
   	<table align="center" border="1" width="60%">
   		<tr><th><span>test JS</span></th></tr>
   		<tr><td>简单量词</td><td><input type="button" value="测试" onclick="regexp();"/></td></tr>
   	</table>
   	<hr>
   	<span id="donghua"><a href="#">|******动画******|</a></span><input type="button" value="停止动画" onclick="javascript:stopAnimation();"/>
   	<div id="panel">
   	</div>
   	<span id="uod"><a href="#">|******展开或隐藏******|</a></span>
   	<div id="menu" align="center" style="display: none;"> 
   		<div class="has_children">
   			<span>test1</span>
   			<a>111111</a>
   			<a>222222</a>
   			<a>333333</a>
   			<a>444444</a>
   			<a>555555</a>
   		</div>
   		<div class="has_children">
   			<span>test2</span>
   			<a>aaaaaa</a>
   			<a>bbbbbb</a>
   			<a>cccccc</a>
   			<a>dddddd</a>
   			<a>eeeeee</a>
   		</div>
   		<div class="has_children">
   			<span>test3</span>
   			<a>1a1a1a1</a>
   			<a>2b2b2b2</a>
   			<a>3c3c3c3</a>
   			<a>4d44d4d</a>
   			<a>5e5e55e</a>
   		</div>
   	</div>
   	<div align="center" style="width: 1000px;">
   		表格过滤:<input type="text" id="tablefilter"/>
   		<table id="ttable" border="1" width="100%">
   			<tr><td>adf1</td><td>2tyj</td><td>3k</td><td>4dbmc</td><td>5sfaS</td><td><input type="checkbox"/></td></tr>
   			<tr><td>6rgd</td><td>7d</td><td>8nm</td><td>9lgj</td><td>10fdg</td><td><input type="checkbox"/></td></tr>
   			<tr><td>21ar</td><td>22</td><td>53</td><td>74</td><td>95</td><td><input type="checkbox" disabled="disabled"/></td></tr>
   			<tr><td>ad1</td><td>vz2</td><td>3sdf</td><td>784</td><td>05</td><td><input type="checkbox" disabled="disabled"/></td></tr>
   		</table>
   	</div>
   	<div>
   		<ul>
   			<li>1</li>
   			<li>2</li>
   			<li>3</li>
   			<li>4</li>
   		</ul>
   	</div>
   		<input type="text" id="test" name="test"/><input type="button" id="b1" name="b1" value="切换内容"/>
   	<A oncontextmenu="ThunderNetwork_SetHref(this);" onclick="return OnDownloadClick_Simple(this,2,4)" href="#" thunderResTitle="下载资源名" thunderType="" thunderPid="57029" thunderHref="http://42.120.4.17/downloadserver/gameplatform/game/apk/115/apkurl/80wey3knld45QuH6NIB7.apk">迅雷专用高速下载</A>
  </body>
</html>
